<template>
    <main-wrap>
        <div class="page msg_success js_show">
            <div class="weui-msg">
                <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
                <div class="weui-msg__text-area">
                    <h2 class="weui-msg__title">{{title}}</h2>
                    <p class="weui-msg__desc">{{msg}}</p>
                    <p class="weui-msg__desc" v-if="descri !== ''">{{descri}}</p>
                </div>
                <div class="weui-msg__opr-area">
                    <p class="weui-btn-area">
                        <a href="javascript:;" class="weui-btn weui-btn_primary" @click="godetail">{{mainbtntext}}</a>
                        <router-link v-if="showsubbtn" :to="subbtnurl" class="weui-btn weui-btn_default">{{subbtntext}}</router-link>
                    </p>
                </div>
            </div>
        </div>

        <div class="weui-gallery" v-show="showgallery">
            <div class="gallery-mask"></div>
            <div class="gallery-img-wrap">
                <img :src="galleryimg[0]" :srcset="galleryimgsrcset">
                <span>{{showtime}}s</span>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
export default {
  name: 'OperRes',
  components: {
    MainWrap
  },
  data () {
    return {
      showgallery: false,
      galleryimg: [require('@/assets/imgs/海报.png'), require('@/assets/imgs/海报@2x.png'), require('@/assets/imgs/海报@3x.png')],
      showtime: 6,

      title: this.$route.query.title !== undefined ? this.$route.query.title : '操作成功',
      msg: this.$route.query.msg !== undefined ? this.$route.query.msg : '', // 欢迎您下次继续使用本服务
      descri: this.$route.query.descri ? this.$route.query.descri : '',
      mainbtntext: this.$route.query.mainbtntext ? this.$route.query.mainbtntext : '查看详情',
      mainbtnurl: this.$route.query.mainbtnurl ? this.$route.query.mainbtnurl : '/',
      // mainbtncb: this.$route.query.mainbtncb ? this.$route.query.mainbtncb : '',
      showsubbtn: this.$route.query.showsubbtn !== undefined ? this.$route.query.showsubbtn : true,
      subbtntext: this.$route.query.subbtntext ? this.$route.query.subbtntext : '回到首页',
      subbtnurl: this.$route.query.subbtnurl ? this.$route.query.subbtnurl : '/',
      showAD: this.$route.query.showAD !== undefined ? this.$route.query.showAD : true
    }
  },
  computed: {
    galleryimgsrcset () {
      return this.cm.srcsetstr(this.galleryimg[1], this.galleryimg[2])
    }
  },
  watch: {
    showtime () {
      if (this.showtime === 0) {
        this.$router.push(this.mainbtnurl)
      } else {
        setTimeout(() => {
          this.showtime--
        }, 1000)
      }
    }
  },
  // mounted () {
  //   if (this.mainbtncb !== '' && typeof this.mainbtncb === 'function') this.mainbtncb()
  // },
  methods: {
    godetail () {
      if (this.showAD) {
        this.showgallery = true
        setTimeout(() => {
          this.showtime--
        }, 1000)
      } else {
        this.$router.push(this.mainbtnurl)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.weui-gallery
    background none
    display flex
    text-align center
    .gallery-mask
        background #999
        opacity .6
        position fixed
        top 0
        bottom 0
        left 0
        right 0
    .gallery-img-wrap
        z-index 100
        width 90%
        align-self center
        margin 0 auto
        position relative

        img
            width 100%
        span
            position absolute
            top 1em
            right 1em
            padding 0 10px
            background black
            opacity .6
            color white
            border-radius 16px
</style>
